<template>
	<div class="m-banner-wrap" v-if="bannerData.length">
		<div class="m-banner-list">
			<div class="u-banner-item fade" v-for="(item1, index1) in Math.ceil(bannerData.length/4)" :key="index1"
				v-show="index1===activeIndex"
				@mouseenter="onStop" @mouseleave="onStart">
				<div class="list" v-for="(item, index) in bannerData" v-if="index<((index1+1)*4)&&index>=index1*4" :style="`background: url(${bgData[index%4]}) no-repeat center; background-size: cover;`">
					<span>{{item.Sum}}分</span>
					<div>{{item.ActivityTypeName}}</div>
				</div>
			</div>
			<div class="btn" style="width: 60px;text-align: right;cursor: pointer;" @click="onMove">
				<img src="../../assets/home/banner-btn.png" />
			</div>
		</div>
		
		<div class="m-dot-list" v-if="bannerData.length > 1">
			<div v-for="n of Math.ceil(bannerData.length/4)" :key="n" :class="['u-dot-item', {active: (n-1)===activeIndex}]"
				@mouseenter="onEnter(n-1)">
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		name: 'Banner',
		props: {
			bannerData: { // banner数组
				type: Array,
				required: true, // 必传
				default: () => {
					return []
				}
			},
			interval: { // 切换间隔ms
				type: Number,
				default: 3000
			}
		},
		data() {
			return {
				activeIndex: 0,
				timer: null,
				bgData:[
					require(`../../assets/home/li1.png`),
					require(`../../assets/home/li2.png`),
					require(`../../assets/home/li3.png`),
					require(`../../assets/home/li4.png`)]
			}
		},
		mounted() {
			// setTimeout(() => {
			// 	this.onStart()
			// }, 1000)
			// window.onfocus = () => {
			// 	this.onStart()
			// }
			window.onblur = () => {
				this.onStop()
			}
		},
		methods: {
			onStart() {
				// clearInterval(this.timer)
				// if (this.bannerData.length > 1) {
				// 	this.timer = setInterval(this.onMove, this.interval)
				// }
			},
			onStop() {
				clearInterval(this.timer)
			},
			onEnter(index) {
				clearInterval(this.timer)
				this.activeIndex = index
				// this.onStart()
			},
			onMove() {
				if (this.activeIndex === Math.ceil(this.bannerData.length/4) - 1) {
					this.activeIndex = 0
				} else {
					this.activeIndex++
				}
			}
		},
		beforeDestroy() {
			clearInterval(this.timer)
			this.timer = null
		}
	}
</script>
<style lang="less" scoped>
	@mainColor: #108ee9;
	.list{
		height: 80px;
		padding-top: 12px;
		margin-right: 2%;
		flex: 1;
		border-radius: 15px;
		text-align: center;
		color: #fff;
		span{
			font-size: 22px;
		}
		div{
			font-size: 12px;
		}
		&:nth-child(4n){
			margin-right: 0;
		}
	}
	.m-banner-wrap {
		width: 100%;
		height: 100px;
		margin: 0 auto;
		overflow: hidden;
		position: relative;

		.m-banner-list {
			height: 100px;
			display: flex;
			.u-banner-item {
				height: 100px;
				width: 100%;
				display: flex;
				a {
					display: block;
					height: 100%;
				}
			}

			.fade {
				// 切换banner时的过渡效果
				-webkit-animation: fadeIn .5s, float .5s 1s infinite;
				animation: fadeIn .5s, float .5s 1s infinite;
				animation-name:fade
			}

			@-webkit-keyframes fade {
				from {
				    opacity: 0;
				    -webkit-transform: translate3d(100%, 0, 0);
				    transform: translate3d(100%, 0, 0);
				  }
				
				  to {
				    opacity: 1;
				    -webkit-transform: translate3d(0, 0, 0);
				    transform: translate3d(0, 0, 0);
				  }
			}

			@keyframes fade {
				from {
				    opacity: 0;
				    -webkit-transform: translate3d(100%, 0, 0);
				    transform: translate3d(100%, 0, 0);
				  }
				
				  to {
				    opacity: 1;
				    -webkit-transform: translate3d(0, 0, 0);
				    transform: translate3d(0, 0, 0);
				  }
			}
		}

		.m-dot-list {
			width: 100%;
			position: absolute;
			bottom: 0px;
			text-align: center;
			.u-dot-item {
				// 圆点样式
				display: inline-block;
				border-radius: 1px;
				width: 35px;
				height: 2px;
				margin: 0 10px;
				background: #AFAFAF;
				cursor: pointer;
				border: 1px solid #AFAFAF;
			}

			.active {
				background: #0048D2;
				border: 1px solid #0048D2;
			}
		}
	}
</style>
